<template>
    <el-card class="input_num_cd">
        <el-icon><Upload /></el-icon>
        <span class="input_num_span" v-html="numStr">
        </span>
    </el-card>
    <LogInfo ref="LogCp" />
    <div id="inputDiv">
        <p><input type="text" placeholder="请输入英文" class="input_txt" v-model="english" @keydown.enter="chineseTxt.focus()" ref="englishTxt" /></p>
        <p><input type="text" placeholder="请输入中文" class="input_txt" v-model="chinese" @keydown.enter="inputWord" ref="chineseTxt" /></p>
        <p>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="cancelContent"
              placement="top-start"
            >
            <el-button 
            type="danger" 
            class="cancel_bt"
            :disabled="inputWordList.length == 0"
            @click="undo"
            >撤销上一次的录入</el-button>        
            </el-tooltip>
        </p>
    </div>
    <el-card class="sel_type_cd">
        <p>
            <el-text type="primary" size="large" style="user-select: none;">分类:</el-text>
            <el-button @click="isAddType = true" type="primary" size="small">新增</el-button>
        </p>
        <select name="" id="selType" ref="selTypeObj">
            <option v-for="e in classArr" :value="e.classType">{{ e.classType }}</option>
        </select>
        
    </el-card>

    <!-- 对话框 -->
    <el-dialog v-model="isAddType" title="请输入新类型名称">
        <el-input v-model="addTypeName" />
        <p style="padding: 8px;margin-top: 18px;text-align: right;">
            <el-button type="info" @click="isAddType=false">取消</el-button>
            <el-button type="primary" @click="addType">确认</el-button>
        </p>
    </el-dialog>
</template>
<script setup>
    import {reactive,ref,computed,onMounted,nextTick} from 'vue'
    import LogInfo from './LogInfo.vue';
    import { ElMessage } from 'element-plus'
    import axios from '../../config/axios';
    let inputNum = ref(0);
    let numStr = computed(()=>`<font color='yellowgreen'>${inputNum.value}</font>`);
    let LogCp = ref(null);
    let chinese = ref('');
    let english = ref('');
    let chineseTxt = ref(null);
    let englishTxt = ref(null);
    let inputWordList = ref([]);
    let cancelContent = computed(()=>inputWordList.value.length == 0?'没有可以撤销的单词':`撤销：${inputWordList.value[inputWordList.value.length-1].chinese}=${inputWordList.value[inputWordList.value.length-1].english}`)
    let classArr = ref([]);
    let selTypeObj = ref(null);
    let isAddType = ref(false);
    let addTypeName = ref('');

 
    //输入单词
    function inputWord(){
        if(!chinese.value){ chineseTxt.value.focus();  return ElMessage.warning('请输入中文')};
        if(!english.value){ englishTxt.value.focus();  return ElMessage.warning('请输入英文')};
        axios.post('/word',{
            chinese:chinese.value,english:english.value,classType:selTypeObj.value.value
        }).then(res=>{
            console.log("单词录入成功",res);
            inputNum.value ++ ;
            ElMessage.success("单词录入成功");
            inputWordList.value.push(res.data.data);
            LogCp.value.appendLog(`录入成功：${chinese.value}=${english.value}`);
            chinese.value = '';
            english.value = '';
            nextTick(()=>{englishTxt.value.focus()})
        }).catch(err=>{
            console.log("单词录入失败",err);
            ElMessage.warning("单词录入失败");
        })
    }

    let undoLock = false;
    //撤回单词
    function undo(){
        if (undoLock) return ElMessage.warning('上一个单词正在撤回中，请稍加等待');
        undoLock = true;
        if (inputWordList.value.length <= 0) {
            return ElMessage.warning('没有可撤回的单词');
        }
        let undoWord = inputWordList.value[inputWordList.value.length-1];
        console.log("正在删除单词",undoWord);
        axios.delete('/word/'+undoWord.id).then(res=>{
            if (res.data.result) {
                ElMessage.success('单词撤回成功');
                LogCp.value.appendLog(`单词已经撤回：${undoWord.chinese}=${undoWord.english}`);
                inputWordList.value.pop();
            }else{
                ElMessage.warning('撤回失败')
                LogCp.value.appendLog(res.data.msg,true);
                console.log(res.data);
            }
        }).catch(err=>{
            ElMessage.warning('服务器异常')
            console.log(err);
        }).finally(()=>{
            undoLock = false;
        })
    }

    //查询所有分类
    function getClassType(){
        axios.get('/type?me=true').then(res=>{
            if (res.data.result) {
                classArr.value = res.data.data;
                console.log("分类数组",res.data.data);
            }else{
                ElMessage.warning('查询分类数组时出现异常')
                console.log(res.data);
            }
        }).catch(err=>{
            ElMessage.warning('查询分类数组时出现错误')
            console.log(err);
        })
    }

    //添加分类
    function addType(){
        if(!addTypeName.value.trim())return ElMessage.warning('请输入类型名');
        let opt = document.createElement(`option`);
        opt.value = addTypeName.value.trim();
        opt.innerText = addTypeName.value.trim();
        selTypeObj.value.appendChild(opt);
        selTypeObj.value.value = opt.value;
        ElMessage.success('类型添加成功');
        isAddType.value = false;
        addTypeName.value = '';
    }
    
    
   
    onMounted(()=>{
    getClassType();
    })


</script>

<style scoped>
    .input_num_cd{
        width: 80px;
        text-align: center;
        background-color: rgba(192, 34, 34, 0.486);
        font-size: 30px;
    }
    .input_txt{
        width: 50vw;
        height: 40px;
        max-width: 600px;
        margin-bottom: 90px;
        border: 1px solid rgb(204, 198, 198);
        border-radius: 10px;
        box-shadow: 3px 3px 3px rgb(44, 21, 21);
        font-size: 18px;
        padding: 5px 8px;
    }
    #inputDiv{
        text-align: center;
        user-select: none;
        margin-top: 39px;
    }
    .input_txt:focus{
        outline: none;
    }
    .cancel_bt{
        margin-top: 70px;
        transform: translate(100%);
    }
    .sel_type_cd{
        width: 130px;
        position: fixed;
        top: 50vh;
        transform: translateY(-100%);
    }
</style>
